<template>
    <div class="credit">
        <div class="left">
            公告
        </div>
        <div class="right">
            <div id="box">
                <ul id="con1" ref="con1" :class="{anim:animate==true}">
                    <li v-for='(item) in items'>
                        <a href="">{{item.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

</template>

<script>
export default {
  computed: {
    Home: function() {
        return this.$store.state.mock
    //   return this.$store.state.Home
    }
  },
  data() {
    return {
      animate: false,
      items: [
        //消息列表对应的数组
        {
          name:
            '热烈庆祝米娱游戏成为上海市指定高新企业，特举行全平台庆祝活动！即日起'
        },
        { name: '“她游戏”背后的故事 女性游戏玩家行为分析' },
        { name: '任天堂为独立世界网站申请商标 深耕独立游戏领域' }
      ],
      it:undefined
    }
  },

  mounted() {
    this.it = setInterval(this.scroll, 1000) // 在钩子函数中调用我在method 里面写的scroll()方法，注意此处不要忘记加this,我在这个位置掉了好几次坑，都是因为忘记写this。
  },

  destroyed(){
 clearInterval(this.it);
  },
 
  methods: {
    scroll() {
      let con1 = this.$refs.con1
    //   if (con1) { 
        con1.style.marginTop = '-30px'
        this.animate = !this.animate
        var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function() {
          that.items.push(that.items[0])
          that.items.shift()
          con1.style.marginTop = '0px'
          that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
        }, 500)
      }
    // }
  }
}
</script>

<style  lang="less" scoped>
.credit {
  display: flex;
  height: 100px;
  background: #ffffff;
  margin-bottom: 50px;
  .left {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .right {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
#box {
  width: 100%;
  height: 58px;
  line-height: 30px;
  overflow: hidden;
  padding-left: 30px;
  transition: all 0.5s;
  border: none;
  border-left: 1px solid black;
}
.anim {
  transition: all 0.5s;
}
#con1 li {
  list-style: none;
  line-height: 30px;
  height: 30px;
}
</style>
